<template>
  <view>

    <recommended>
      <template #header>

        <up-sticky :offsetTop="0" :customNavHeight="0">
          <view class="header-bg" :style="{height: (customNavHeight * 2) + 10 + 'rpx'}"></view>
          <view class="header-bg u-p-b-20" style="padding-right: 200rpx;">
            <view class="u-p-l-30 u-p-r-30">
              <up-search v-model="inputValue" placeholder="商品名称、分类等关键字" :clearabled="true" :showAction="false" @search="handleSearch"></up-search>
            </view>
          </view>
        </up-sticky>
        
        <tab1Header />
      </template>
    </recommended>

  </view>
</template>

<script>
import tab1Header from "./tab1-header.vue";
import recommended from "@/components/recommended/recommended.vue";
export default {
  components: {
    tab1Header,
    recommended
  },
  data() {
    return {
      safeTop: 0,
      inputValue: '',
      categoryList: [],
      recommendList: [],
      customNavHeight: 0
    }
  },
  created() {
    const sysInfo = uni.getSystemInfoSync()
    this.customNavHeight = sysInfo.statusBarHeight;
    console.log(this.customNavHeight)
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      let { data } = await this.$api.goods.categorys()
      this.categoryList = data

      let params = {
        "pageIndex": 1,
        "pageSize": 15
      }
      let res = await this.$api.goods.recommended({
        ...params
      })
      this.recommendList = res.data?.items || []
    },
    toClassify(item) {
      uni.navigateTo({
        url: '/pages/classify/classify?id=' + (item.value || '')
      })
    },
    toHistory() {
      uni.navigateTo({
        url: '/pages/history/history'
      })
    },
    toOrder() {
      uni.navigateTo({
        url: '/pages/order/order'
      })
    },
    toInfo(item) {
      uni.navigateTo({ url: '/pages/goods-info/goods-info?id=' +item.id })
    },
    handleSearch() {
      uni.navigateTo({
        url: '/pages/search/search?keyword=' + this.inputValue
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.classify-content
  white-space: nowrap
  overflow-x: scroll
  padding 0 15px
.classify
  width: 144rpx
  height: auto
  text-align: center
  display: inline-block
  margin-right 20px
  &-img
    width: 144rpx
    height: 144rpx
    background: #f4f4f4
    border-radius: 50%
  &-txt
    margin-top: 10px

.sales-item
  flex-basis 164px
  flex-grow: 0;     /* 防止子元素被拉伸 */
  flex-shrink: 0;   /* 防止子元素被压缩 */
  height auto
  padding-right 30rpx

.header-bg
  background: #ffffff
</style>
